<!-- <template>
  <view>
    <view class="song">
      <view class="song-play margin-top">
        <image
          class="song-play-image song-play-animation"
          :class="{ 'song-play-animation-paused': !isPlay }"
          :src="pageData.img_url"
        ></image>
        <image
          class="song-play-icon"
          :src="isPlay ? playImage : pauseImage"
          @click="clickPlay"
        ></image>
      </view>
    </view>
  </view>
</template> -->

<template>
  <div>
    <img :src="pageData.img_url" alt="Album Art" />
    <button @click="clickPlay">
      <img :src="isPlay ? playImage : pauseImage" alt="Play/Pause" />
    </button>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

// 创建音频播放器
const innerAudioContext = uni.createInnerAudioContext();

// 组件的响应式数据
const pageData = ref({
  img_url:
    "https://p1.music.126.net/y1dxGN45bYIHSjTcacDpgw==/109951169116559827.jpg?imageView&thumbnail=360y360&quality=75&tostatic=0",
});
const isPlay = ref(true);
const playImage = ref("/static/images/play_1649.png");
const pauseImage = ref("/static/images/pause_1649.png");

// 组件挂载时自动播放音频
onMounted(() => {
  innerAudioContext.autoplay = false;
  innerAudioContext.src =
    "http://114.132.156.58:9000/awesome-jiunuan-bucket/output.mp3";
  onError(); // 监听错误
});

// 点击播放/暂停按钮
const clickPlay = () => {
  if (isPlay.value) {
    onPause();
  } else {
    onPlay();
  }
};

// 监听播放
const onPlay = () => {
  innerAudioContext.play();
  innerAudioContext.onPlay(() => {
    isPlay.value = true;
  });
};

// 监听暂停
const onPause = () => {
  innerAudioContext.pause();
  innerAudioContext.onPause(() => {
    isPlay.value = false;
  });
};

// 监听错误
const onError = () => {
  innerAudioContext.onError(() => {
    isPlay.value = false;
  });
};
</script>

<style lang="scss">
.song {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  &-play {
    position: relative;
    &-image {
      width: 80vw;
      height: 80vw;
      border-radius: 1000px;
      opacity: 0.65;
    }
    &-icon {
      position: absolute;
      top: calc(50% - 30px);
      left: calc(50% - 30px);
      width: 60px;
      height: 60px;
      opacity: 1;
    }
  }
}

/* 图片旋转动画 */
@keyframes image-trans {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .song-play-animation {
    animation: image-trans infinite 20s linear;
  }
}
/* 音频暂停时，图片暂停旋转 */
.song-play-animation-paused {
  animation-play-state: paused;
}
</style>
